<template>
    <div class="app-container">
        <div style="text-align: center;margin-bottom: 30px">
            每日任务{{ createStatus ? '新增' : '更新' }}
        </div>
        <el-form :model="userTaskForm" ref="userTaskForm"  :rules="userTaskFormRules" label-width="100px">
            <el-row :gutter="10">
                <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
                    <el-form-item label="任务名称" prop="name">
                        <el-input type="text" v-model="userTaskForm.name" placeholder="请输入任务名称" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
                    <el-form-item label="任务编码" prop="code">
                        <el-input type="text" v-model="userTaskForm.code" placeholder="请输入任务编码" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
                    <el-form-item label="所属企业" prop="enterpriseId">
                        <el-select v-model="userTaskForm.enterpriseId" placeholder="请选择企业" style="width: 100%">
                            <el-option v-for="(item,index) in enterpriseList" :key="index"  :value="item.ucId" :label="item.enterpriseName"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
                    <el-form-item label="执行人员" prop="userId">
                        <el-select v-model="userTaskForm.userId" placeholder="请选择执行人员" style="width: 100%">
                            <el-option v-for="(item,index) in userList" :key="index"  :value="item.ucId" :label="item.disPlayName"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
                    <el-form-item label="任务状态" prop="status">
                        <el-select style="width: 100%" v-model="userTaskForm.status" placeholder="请选择任务状态">
                            <el-option label="已下发" :value="0"></el-option>
                            <el-option label="进行中" :value="1"></el-option>
                            <el-option label="延迟" :value="2"></el-option>
                            <el-option label="已完成" :value="3"></el-option>
                            <el-option label="已取消" :value="4"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
                    <el-form-item label="开始时间" prop="startTime">
                        <el-date-picker
                                v-model="userTaskForm.startTime"
                                type="date"
                                placeholder="选择日期"
                                style="width: 100%">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
                    <el-form-item label="结束时间" prop="endTime">
                        <el-date-picker
                                v-model="userTaskForm.endTime"
                                type="date"
                                placeholder="选择日期"
                                style="width: 100%">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                  <el-form-item label="任务内容" prop="content">
                    <el-input  type="textarea" :rows="2" v-model="userTaskForm.content" placeholder="请输入任务内容" clearable></el-input>
                  </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div slot="footer" style="text-align: center" class="dialog-footer">
            <el-button @click="cancelUserTask">取 消</el-button>
            <el-button :loading="addLoading" v-if="createStatus" type="primary" @click="createUserTask">创 建
            </el-button>
            <el-button :loading="addLoading" v-else type="primary" @click="updateUserTask">修 改</el-button>
        </div>
    </div>
</template>

<script>
import {getInUserTaskVo,addInUserTask,updateInUserTask} from "@/api/taskinfo";
import {getInEnterpriseList,getInUserList} from "@/api/enterprise";
import {getInEnterpriseDominantList} from "@/api/enterpriseDominant";


export default {
    name: "UserTaskEdit",
    data() {
        return {
            userTaskForm: {
                status:0,
            },
            addLoading: false,
            enterpriseDominantList:[],
            userList:{},
            userTaskFormRules:{
                name: [{required: true, message: '任务名称不能为空', trigger: 'blur'}],
                content: [{required: true, message: '任务内容不能为空', trigger: 'blur'}],
                enterpriseId :[{required: true, message: '所属企业不能为空', trigger: 'blur'}],
                userId :[{required: true, message: '执行人员不能为空', trigger: 'blur'}],
            }
        }
    },
    computed: {
        createStatus() {
            return this.$route.params.ucId == '0'
        },
    },
    created() {
        this.getInUserList()
        this.getInEnterpriseDominantList()
        if (!this.createStatus) {
            let ucId = this.$route.params.ucId
            this.getInUserTaskVo(ucId)
        }
    },
    methods: {
        getInUserTaskVo(val) {
            getInUserTaskVo({ucId: val}).then(res => {
                this.userTaskForm = res.data
            }).catch(res => {

            })
        },
        cancelUserTask() {
          window.history.back()
        },
        createUserTask() {
            this.addLoading = true
            this.$refs['userTaskForm'].validate(valid => {
                if (valid) {
                    addInUserTask(this.userTaskForm).then(res => {
                        this.addLoading = false
                        this.$notify.success({
                            title: '成功',
                            message: "添加报警配置成功"
                        })
                        this.cancelUserTask()
                    }).catch(res => {
                        this.addLoading = false
                        this.$notify.error({
                            title: '失败',
                            message: res.msg
                        })
                    })
                } else {
                    this.addLoading = false
                    console.log("表单验证不通过")
                }
            })
        },
        updateUserTask() {
            this.addLoading = true
            this.$refs['userTaskForm'].validate(valid => {
                if (valid) {
                    updateInUserTask(this.userTaskForm).then(res => {
                        this.addLoading = false
                        this.$notify.success({
                            title: '成功',
                            message: "更新报警配置成功"
                        })
                        this.cancelUserTask()
                    }).catch(res => {
                        this.addLoading = false
                        this.$notify.error({
                            title: '失败',
                            message: res.msg
                        })
                    })
                } else {
                    this.addLoading = false
                    console.log("表单验证不通过")
                }
            })
        },
        getInEnterpriseDominantList(){
            getInEnterpriseDominantList({deleted:false}).then(res=>{
                this.enterpriseDominantList = res.data
            }).catch(error=>{

            })
        },
        getInUserList() {
            getInUserList({deleted: false}).then(res => {
                this.userList = res.data
            }).catch(error => {

            })
        }


    }

}
</script>
